<template>
  <el-card class="ik-chart-card">
    <div slot="header" class="clearfix">
      <span class="ik-chart-card-title">{{ title }}</span>
      <p class="table_title_img" />
      <span class="logo" />
    </div>
    <div
      :id="code"
      ref="chartDom"
      class="ik-chart-card-chart"
      :style="'height: ' + height + ''"
      @click="changeSize"
    />
  </el-card>
</template>

<script>
import { dimensionExtraction, initDoubleSeries } from "@/views/frame/board/components/ik/echarts/dataProcess"
import theme from "@/views/frame/board/components/ik/echarts/theme/ik.json"
import * as echarts from "echarts"

export default {
  name: "IkLinePointChart",
  props: {
    title: {
      type: String,
      default: "标题"
    },
    code: {
      type: String,
      default: "bar.base"
    },
    data: {
      type: Array,
      default: function() {
        return [
          { type: "送货车", value1: "200", value2: "21" },
          { type: "送货车", value1: "244", value2: "34" },
          { type: "送货车", value1: "145", value2: "25" },
          { type: "送货车", value1: "340", value2: "11" },
          { type: "接货车", value1: "94", value2: "27" },
          { type: "接货车", value1: "293", value2: "34" },
          { type: "接货车", value1: "40", value2: "43" },
          { type: "接货车", value1: "190", value2: "40" },
          { type: "等待车", value1: "320", value2: "42" },
          { type: "等待车", value1: "24", value2: "39" }
        ]
      }
    },
    // 数据分析维度 - 第一数据维度
    firstDataDimensionField: {
      type: String,
      default: "value1"
    },
    firstDataDimensionMin: {
      type: String,
      default: ""
    },
    firstDataDimensionMax: {
      type: String,
      default: ""
    },
    firstDataDimensionInterval: {
      type: String,
      default: ""
    },
    firstDataDimensionUom: {
      type: String,
      default: ""
    },
    firstDataDimensionStartAngle: {
      type: String,
      default: "90"
    },
    firstGridType: {
      type: String,
      default: "list"
    },
    // 数据分析维度 - 第二数据维度
    secondDataDimensionField: {
      type: String,
      default: "value2"
    },
    secondDataDimensionMin: {
      type: String,
      default: ""
    },
    secondDataDimensionMax: {
      type: String,
      default: ""
    },
    secondDataDimensionInterval: {
      type: String,
      default: ""
    },
    secondDataDimensionUom: {
      type: String,
      default: ""
    },
    secondGridType: {
      type: String,
      default: "list"
    },
    // 数据分析维度 - 第一分析维度 - 横坐标
    analysisDimensionField: {
      type: String,
      default: ""
    },
    analysisDimension: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 样式
    height: {
      type: String,
      default: "100%"
    }
  },
  data() {
    return {
      chartAnalysisDimension: [],
      chartSeries: [],
      chartDom: null,
      chart: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    changeSize() {
      // 修改 echart 大小
      this.chart.resize()
    },
    init() {
      const $this = this
      // 初始化 chart 样式
      // 基于准备好的dom，初始化echarts实例
      const dom = document.getElementById($this.code)
      echarts.registerTheme("ik", theme)
      this.chart = echarts.init(dom, "ik")
      // 如果第一维度不存在，通过字段抽取
      if ($this.analysisDimension.length === 0) {
        // 第二维度非必需，填写则抽取
        if ($this.analysisDimensionField !== "") {
          $this.chartAnalysisDimension = dimensionExtraction(
            $this.data,
            $this.analysisDimensionField
          )
        }
      } else {
        $this.chartAnalysisDimension = $this.analysisDimension
      }

      // 生成 series
      const series = initDoubleSeries(
        $this.data,
        $this.chartAnalysisDimension,
        [],
        $this.analysisDimensionField,
        "",
        $this.firstDataDimensionField,
        $this.firstGridType,
        $this.secondDataDimensionField,
        $this.secondGridType
      )
      console.log(series, "外series")

      // 生成第一数据轴数据
      const firstAxis = {}
      if ($this.firstDataDimensionMin !== "") {
        firstAxis["min"] = Number($this.firstDataDimensionMin)
      }
      if ($this.firstDataDimensionMax !== "") {
        firstAxis["max"] = Number($this.firstDataDimensionMax)
      }
      if ($this.firstDataDimensionInterval !== "") {
        firstAxis["interval"] = Number($this.firstDataDimensionInterval)
      }
      if ($this.firstDataDimensionStartAngle !== "") {
        firstAxis["startAngle"] = Number($this.firstDataDimensionStartAngle)
      }
      if ($this.firstDataDimensionUom !== "") {
        console.log()
      }
      // 生成第二数据轴数据
      const secondAxis = {}
      if ($this.secondDataDimensionMin !== "") {
        secondAxis["min"] = Number($this.secondDataDimensionMin)
      }
      if ($this.secondDataDimensionMax !== "") {
        secondAxis["max"] = Number($this.secondDataDimensionMax)
      }
      if ($this.secondDataDimensionInterval !== "") {
        secondAxis["interval"] = Number($this.secondDataDimensionInterval)
      }
      if ($this.secondDataDimensionUom !== "") {
        console.log()
      }

      const chartSeries = []
      for (const key in series) {
        chartSeries.push({
          coordinateSystem: "polar",
          name: key,
          type: "line",
          smooth: true,
          showBackground: true,
          data: series[key]
        })
      }
      console.log(chartSeries, "this.chartSeries")

      // 绘制图表
      this.chart.setOption({
        tooltip: {
          backgroundColor: ["rgba(255,255,255,0.7)"],
          formatter: function(obj) {
            const value = obj.value
            return "(" + value[0] + ", " + value[1] + ")"
          }
        },
        legend: {
          orient: "vertical",
          left: "right",
          data: $this.chartAnalysisDimension
        },
        polar: {
          center: ["50%", "50%"]
        },
        angleAxis: firstAxis,
        radiusAxis: secondAxis,
        series: chartSeries
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ik-chart-card {
  width: 100%;
  height: 100%;
  position: relative;
  ::v-deep .el-card__header {
    padding: 10px;
    position: absolute;
    width: 100%;
    // height: 20%!important;
    .clearfix {
      height: 20px;
      line-height: 20px;
    }
  }
  ::v-deep .el-card__body {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: calc(100% - 41px) !important;
    padding: 0px;
    padding-left: 5px;
    canvas {
      width: 100% !important;
      height: 100% !important;
    }
  }
}
// @import './default.scss';
// @import '../../../../../../../styles/robot/robot.scss';
</style>
